<meta name="csrf-token" content="{{ csrf_token() }}">

<style type="text/css">
    .btn-on{
        border:2px solid red
    }
</style>

<div class="row">
    <div class="col-12 box">
        <div class="box box-body">
            <table class="table table-primary" id="main_table">
                <thead>
                <th>班段</th>
                <th>开班批次</th>
                <th>分组</th>
                <th>班型</th>
                <th>班号</th>
                <th>班主任</th>
                <th>全勤率</th>
                <th>家校准交率</th>
                <th>作业准交率</th>
                <th>流失率</th>
                <th>流失人数</th>
                </thead>
                <tbody>
                {{--    @foreach($data as $row)
                        <tr>
                            @foreach($row as $value)
                                <td>{{$value}}</td>
                            @endforeach
                        </tr>
                    @endforeach--}}
                </tbody>
            </table>
        </div>
        <div class="box box-footer">
            总共<b id="total"></b>条
            <ul class="pagination pagination-sm no-margin pull-right">
                <!-- Previous Page Link -->
                <li class="page-item" id="page-minus"><span class="page-link">«</span></li>

                <!-- Pagination Elements -->
                <!-- "Three Dots" Separator -->

                <!-- Array Of Links -->
                <li class="page-item"><span class="page-link" id="page">1</span></li>

                <!-- Next Page Link -->
                <li class="page-item" id="page-add"><span class="page-link">»</span></li>
            </ul>
            <label class="control-label pull-right" style="margin-right: 10px; font-weight: 100;">

                <small>显示</small>&nbsp;
                <select class="input-sm grid-per-pager" name="per-page" id="pagesize">
                    <option value="10">10</option>
                    <option value="20" selected="">20</option>
                    <option value="30">30</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                &nbsp;<small>条</small>
            </label>
        </div>
    </div>
</div>
<table class="table table-striped" id="avg">
    <thead>
    <th>全勤率平均</th>
    <th>家校准交率平均</th>
    <th>作业准交率平均</th>
    <th>流失率平均</th>
    <th>流失人数总和</th>
    </thead>
    <tbody>

    </tbody>
</table>

<div id="page-wrapper">
    <script type="text/javascript">
        function douxing() {
            $('#avg tbody').empty()
            $('#main_table tbody').empty();


            var request={type:$('#type').val()};
            request.section = $('#section').val();
            request.group = $('#group').val();
            request.batch = $('#batch').val();
            request.start_time = $('#start_time').val();
            request.end_time = $('#end_time').val();
            request.year = $('#year').val();
            request.term = $('#term').val();
            request.page = $('#page').text();
            request.pagesize = $('#pagesize').val();

            if($('#kq').hasClass('btn-on')){
                request.kq = 1;
            }
            if($('#zy').hasClass('btn-on')){
                request.zy = 1;
            }
            if($('#jx').hasClass('btn-on')){
                request.jx = 1;
            }
            if($('#lost').hasClass('btn-on')){
                request.lost = 1;
            }
            $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},async:false});
            $.post('ProblemSquad/problem_submit',request,function(e){
                var html = '<tr>';
                html += '<td>'+(e.total_data[0].kq*100).toFixed(2) + '%</td>';
                html += '<td>'+(e.total_data[0].jx*100).toFixed(2) + '%</td>';
                html += '<td>'+(e.total_data[0].zy*100).toFixed(2) + '%</td>';
                html += '<td>'+(e.total_data[0].wastage*100).toFixed(2) + '%</td>';
                html += '<td>'+e.total_data[0].num + '</td></tr>';
                $('#avg tbody').append(html);

                html = '';
                for(i=0;i<e.data.length;i++){
                    html += '<tr>';
                    html += '<td>'+e.data[i].section+'</td>';
                    html += '<td>'+e.data[i].batch+'</td>';
                    html += '<td>'+e.data[i].group_name+'</td>';
                    html += '<td>'+e.data[i].type_name+'</td>';
                    html += '<td>'+e.data[i].no+'</td>';
                    html += '<td>'+e.data[i].tutor+'</td>';
                    html += '<td>'+(e.data[i].kq_rate*100).toFixed(2) + '%</td>';
                    html += '<td>'+(e.data[i].jx_rate*100).toFixed(2) + '%</td>';
                    html += '<td>'+(e.data[i].zy_rate*100).toFixed(2) + '%</td>';
                    html += '<td>'+(e.data[i].wastage_rate*100).toFixed(2) + '%</td>';
                    html += '<td>'+e.data[i].wastage_num + '</td></tr>';
                }
                $('#main_table tbody').append(html);
                $('#total').text(e.total);
            });
        }
        $('#kq,#jx,#zy,#lost').on('click',function(){
            if($(this).hasClass('btn-on')){
                $(this).removeClass('btn-on');
            }else{
                $(this).addClass('btn-on');
            }
        });

        $('#page-minus').on('click',function(){
            var page = parseInt($('#page').text());
            if($('#page').text() == 1){
                return;
            }

            page -= 1;
            $('#page').text(page);

            douxing();
        });

        $('#page-add').on('click',function(){
            var page = parseInt($('#page').text());

            page += 1;
            $('#page').text(page);

            if($('#total').text() == '' || $('#total').text() <= $('#pagesize').val() * $('#page').text()){
                page -= 1;
                $('#page').text(page);
                return;
            }

            douxing();
        });

        $('#pagesize').change(function(){
            douxing();
        });

        $('#btn_submit').on('click',function(){
            $('#page').text(1);
            douxing();
        });

        $('#btn_reset').on('click',function(){
            //$("#section option:selected").prop('selected','false');
            //$("#group option:selected").prop('selected','false');
            //$("#type option:selected").prop('selected','false');
            $('.select2-selection__clear').each(function(){
                $(this).mousedown();
            });

            $('.btn-on').each(function(){
                if($(this).hasClass('btn-on')){
                    $(this).removeClass('btn-on');
                }
            });

            $('#page').text(1);

            $('body').click();

            $('#batch').val('');
        });
    </script>
</div>
